<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title> SmartAdmin </title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- #CSS Links -->
    <!-- Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/font-awesome.min.css">

    <!-- SmartAdmin Styles : Caution! DO NOT change the order -->
    <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-production-plugins.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-production.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-skins.min.css">

    <!-- SmartAdmin RTL Support -->
    <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-rtl.min.css">

    <!-- We recommend you use "your_style.css" to override SmartAdmin
    specific styles this will also ensure you retrain your customization with each SmartAdmin update.
    <link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->

    <!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
    <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/demo.min.css">

    <!-- #FAVICONS -->
    <link rel="shortcut icon" href="${base}/img/favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" href="${base}/img/favicon/favicon.ico" type="image/x-icon">

    <!-- #GOOGLE FONT -->
    <link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:400italic,700italic,300,400,700">

    <!-- #APP SCREEN / ICONS -->
    <!-- Specifying a Webpage Icon for Web Clip
    Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
    <link rel="apple-touch-icon" href="${base}/img/splash/sptouch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="${base}/img/splash/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="${base}/img/splash/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="${base}/img/splash/touch-icon-ipad-retina.png">

    <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="${base}/img/splash/ipad-landscape.png"
          media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="${base}/img/splash/ipad-portrait.png"
          media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="${base}/img/splash/iphone.png"
          media="screen and (max-device-width: 320px)">
    <script type="text/javascript">
        function editPorduct(url) {
            var grid = $("#jqgrid");
            var rowKey = grid.getGridParam("selrow");
            var selectedIDs = grid.getGridParam("selarrrow");
            if (!rowKey) {
                alert("No rows are selected");
            }
            else if (selectedIDs.length > 1) {
                alert("Too many rows");
            }
            else {
                window.location.href = url + "?id=" + selectedIDs[0];
            }
        }
    </script>
</head>


<!--

TABLE OF CONTENTS.

Use search to find needed section.

===================================================================

|  01. #CSS Links                |  all CSS links and file paths  |
|  02. #FAVICONS                 |  Favicon links and file paths  |
|  03. #GOOGLE FONT              |  Google font link              |
|  04. #APP SCREEN / ICONS       |  app icons, screen backdrops   |
|  05. #BODY                     |  body tag                      |
|  06. #HEADER                   |  header tag                    |
|  07. #PROJECTS                 |  project lists                 |
|  08. #TOGGLE LAYOUT BUTTONS    |  layout buttons and actions    |
|  09. #MOBILE                   |  mobile view dropdown          |
|  10. #SEARCH                   |  search field                  |
|  11. #NAVIGATION               |  left panel & navigation       |
|  12. #RIGHT PANEL              |  right panel userlist          |
|  13. #MAIN PANEL               |  main panel                    |
|  14. #MAIN CONTENT             |  content holder                |
|  15. #PAGE FOOTER              |  page footer                   |
|  16. #SHORTCUT AREA            |  dropdown shortcuts area       |
|  17. #PLUGINS                  |  all scripts and plugins       |

===================================================================

-->

<!-- #BODY -->
<!-- Possible Classes

    * 'smart-style-{SKIN#}'
    * 'smart-rtl'         - Switch theme mode to RTL
    * 'menu-on-top'       - Switch to top navigation (no DOM change required)
    * 'no-menu'			  - Hides the menu completely
    * 'hidden-menu'       - Hides the main menu but still accessable by hovering over left edge
    * 'fixed-header'      - Fixes the header
    * 'fixed-navigation'  - Fixes the main menu
    * 'fixed-ribbon'      - Fixes breadcrumb
    * 'fixed-page-footer' - Fixes footer
    * 'container'         - boxed layout mode (non-responsive: will not work with fixed-navigation & fixed-ribbon)
-->
<body class="">

<!-- RIBBON -->
<div id="ribbon">
    <!-- breadcrumb -->
    <ol class="breadcrumb">
        <li>商品管理</li>
        <li>商品列表</li>
    </ol>
    <!-- end breadcrumb -->
</div>
<!-- END RIBBON -->

<!-- MAIN CONTENT -->
<div id="content" style="padding:2px;">

    <!-- widget grid -->
    <section id="widget-grid" class="">

        <!-- row -->
        <div class="row">

            <!-- NEW WIDGET START -->
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                <table id="jqgrid"></table>
                <div id="pjqgrid"></div>
                <br>
                <button type="button" class="am-btn am-btn-default" onclick="location.href='${base}/product/add'"><span
                        class="am-icon-plus"></span> 新增
                </button>
                <button type="button"  class="am-btn am-btn-default" onclick="editPorduct('${base}/product/edit')"><span class="am-icon-trash-o"></span>修改
                </button>
                <br>
                <a href="javascript:void(0)" id="m1">Get Selected id's</a>
                <br>
                <a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>

            </article>
            <!-- WIDGET END -->

        </div>
        <!-- end row -->

    </section>
    <!-- end widget grid -->

</div>
<!-- END MAIN CONTENT -->

<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
<script data-pace-options='{ "restartOnRequestAfter": true }' src="${base}/js/plugin/pace/pace.min.js"></script>

<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="${base}/js/libs/jquery-2.1.1.min.js"></script>
<script>
    if (!window.jQuery) {
        document.write('<script src="${base}/js/libs/jquery-2.1.1.min.js"><\/script>');
    }
</script>

<script src="${base}/js/libs/jquery-ui-1.10.3.min.js"></script>
<script>
    if (!window.jQuery.ui) {
        document.write('<script src="${base}/js/libs/jquery-ui-1.10.3.min.js"><\/script>');
    }
</script>

<!-- IMPORTANT: APP CONFIG -->
<script src="${base}/js/app.config.js"></script>

<!-- JS TOUCH : include this plugin for mobile drag / drop touch events-->
<script src="${base}/js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script>

<!-- BOOTSTRAP JS -->
<script src="${base}/js/bootstrap/bootstrap.min.js"></script>

<!-- CUSTOM NOTIFICATION -->
<script src="${base}/js/notification/SmartNotification.min.js"></script>

<!-- JARVIS WIDGETS -->
<script src="${base}/js/smartwidgets/jarvis.widget.min.js"></script>

<!-- EASY PIE CHARTS -->
<script src="${base}/js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

<!-- SPARKLINES -->
<script src="${base}/js/plugin/sparkline/jquery.sparkline.min.js"></script>

<!-- JQUERY VALIDATE -->
<script src="${base}/js/plugin/jquery-validate/jquery.validate.min.js"></script>

<!-- JQUERY MASKED INPUT -->
<script src="${base}/js/plugin/masked-input/jquery.maskedinput.min.js"></script>

<!-- JQUERY SELECT2 INPUT -->
<script src="${base}/js/plugin/select2/select2.min.js"></script>

<!-- JQUERY UI + Bootstrap Slider -->
<script src="${base}/js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

<!-- browser msie issue fix -->
<script src="${base}/js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

<!-- FastClick: For mobile devices -->
<script src="${base}/js/plugin/fastclick/fastclick.min.js"></script>

<!--[if IE 8]>

<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

<![endif]-->


<!-- MAIN APP JS FILE -->
<script src="${base}/js/app.min.js"></script>

<!-- ENHANCEMENT PLUGINS : NOT A REQUIREMENT -->
<!-- Voice command : plugin -->
<script src="${base}/js/speech/voicecommand.min.js"></script>

<!-- SmartChat UI : plugin -->
<script src="${base}/js/smart-chat-ui/smart.chat.ui.min.js"></script>
<script src="${base}/js/smart-chat-ui/smart.chat.manager.min.js"></script>

<!-- PAGE RELATED PLUGIN(S)
<script src="..."></script>-->

<script src="${base}/js/plugin/jqgrid/jquery.jqGrid.min.js"></script>
<script src="${base}/js/plugin/jqgrid/grid.locale-en.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        pageSetUp();

        jQuery("#jqgrid").jqGrid({
            url: '${base}/product/getProduct',
            editurl: '${base}/product/forEdit',
            datatype: "json",
            mtype: "POST",
            //data : jqgrid_data,
            //datatype : "local",
            height: 'auto',
            colNames: ['${c2("product.productSn")}', '${c2("product.name")}', '${c2("product.price")}', '${c2("product.isMarketable")}', '${c2("product.isBest")}', '${c2("product.isNew")}', '${c2("product.isHot")}', '${c2("product.store")}', '${c2("product.modifyDate")}'],
            colModel: [
                {name: 'productSn', index: 'productSn', editable: true, width: 120},
                {name: 'name', index: 'name', editable: true, width: 400},
                {name: 'price', index: 'price', editable: true, align: "right", width: 50},
                {name: 'isMarketable', index: 'isMarketable', editable: true, width: 50},
                {name: 'isBest', index: 'isBest', editable: true, width: 50},
                {name: 'isNew', index: 'isNew', editable: true, width: 50},
                {name: 'isHot', index: 'isHot', editable: true, width: 50},
                {name: 'store', index: 'store', editable: true, width: 50},
                {name: 'modifyDate', index: 'modifyDate', editable: true, width: 100}
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pjqgrid',
            sortname: 'name',
            toolbarfilter: true,
            viewrecords: true,
            sortorder: "asc",
            //editurl : "dummy.html",
            caption: "产品列表",
            multiselect: true,
            autowidth: true,
            //toolbar : [ true, "top" ]

        });

        jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
            edit: false,
            add: false,
            view: false,
            del: true
        });

        /*$("#jqgrid").append("<input type='button' value='Click Me' style='height:20px;font-size:-3'/>");
         $("input", "#jqgrid").click(function() {
         alert("Hi! I'm added button at this toolbar of top");
         });*/

//				jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid");
//				/* Add tooltips */
//				$('.navtable .ui-pg-button').tooltip({
//					container : 'body'
//				});

        jQuery("#m1").click(function () {
            var s;
            s = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow');
            alert(s);
        });

        jQuery("#m1s").click(function () {
            jQuery("#jqgrid").jqGrid('setSelection', "13");
        });

        // remove classes

        // add classes

    })

    $(window).on('resize.jqGrid', function () {
        $("#jqgrid").jqGrid('setGridWidth', $("#content").width());
    })

</script>

</body>

</html>